<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Infographic</title>
        <!-- BEGIN THEME STYLES -->
        <?php echo $this->Html->css(array('colorpicker.css'),array('media'=>'screen')); ?>
        <?php echo $this->Html->css(array('tooltip.css'),array('media'=>'screen')); ?>
        <?php echo $this->Html->css(array('custom.css','jquery-ui.css','jquery.handsontable.full.css')); ?>
        <!-- END THEME STYLES -->
        <?php echo $this->Html->script(array('jquery-1.9.1.min','jquery-modal'))?>


    </head>
    <body>

        <!-- BEGIN HEADER -->
        <header>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <ul class="top-left-menu">
                            <li><a href=""><?php echo $this->Html->image('images/logo.png'); ?></li>
                            <li class="user"><a href="" class="dropdown">Username</a>
                                <ul>
                                    <li><a href="#">Account Setting</a></li>
                                    <li><a href="#">Info Theme</a></li>
                                    <li><a href="#">My Save Info</a></li>
                                    <li><a href="#">FAQs</a></li>
                                    <li><a href="#">Log out</a></li>
                                </ul>
                            </li>
                            <li class="file"><a href="" class="dropdown">File</a>
                                <ul>
                                    <li><a href="#">Create New File</a></li>
                                    <li><a href="#">Rename</a></li>
                                    <li><a href="#">Save As</a></li>
                                    <li><a href="#">Download as Image</a></li>
                                    <li><a href="#">Trouble Shooting</a></li>   
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <ul class="top-right-menu">
                            <li ><a href="#" class="save"> </a></li>
                            <li class="review"><a href="" onclick="preview_canvas();">PREVIEW</a></li>
                            <li class="download"><a href="" onclick="download_canvas();">DOWNLOAD</a></li>
                            <li class="publish"><a href="">PUBLISH</a></li>
                            <li class="share"><a href="">SHARE</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <!-- END HEADER -->


        <!-- BEGIN MAIN-CONTENT -->
        <div class="container-fluid" ng-controller="CanvasControls">
            <div class="row">
                <div class="main-tools tabs">
                    <div id="tool-graphics" class="tool_button actived" title="">
                        <?php echo $this->Html->image('images/graphics.png'); ?>
                    </div>

                    <div id="tool-upload" class="tool_button" title="">
                        <?php echo $this->Html->image('images/upload.png'); ?>
                    </div>

                    <div id="tool-background" class="tool_button" title="">
                        <?php echo $this->Html->image('images/background.png'); ?>
                    </div>
                    <div id="tool-text" class="tool_button" title="">
                        <?php echo $this->Html->image('images/text.png'); ?>
                    </div>

                    <div id="tool-styles" class="tool_button" title="">
                        <?php echo $this->Html->image('images/styles.png'); ?>
                    </div>

                    <div id="tool-tools" class="tool_button" title="">
                        <?php echo $this->Html->image('images/tools.png'); ?>
                    </div>
                </div>

                <div class="tabs-content">
                    <div class="tab-item active" id="graphics" style="display: block">
                        <h3>REQUEST AN ICON</h3>

                        <div id="accordion">
                            <div class="icon">
                                <h3>ICON</h3>
                                <ul>
                                    <li><?php echo $this->Html->image('images/socials/1.png',array("ng-click"=>"addSocial('1.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/2.png',array("ng-click"=>"addSocial('2.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/3.png',array("ng-click"=>"addSocial('3.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/4.png',array("ng-click"=>"addSocial('4.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/5.png',array("ng-click"=>"addSocial('5.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/6.png',array("ng-click"=>"addSocial('6.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/7.png',array("ng-click"=>"addSocial('7.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/8.png',array("ng-click"=>"addSocial('8.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/9.png',array("ng-click"=>"addSocial('9.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/10.png',array("ng-click"=>"addSocial('10.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/11.png',array("ng-click"=>"addSocial('11.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/socials/12.png',array("ng-click"=>"addSocial('12.png')")); ?></li>
                                </ul>
                            </div>

                            <div style="clear:both"></div>

                            <div class="photo">
                                <h3>PHOTOS</h3>
                                <ul>
                                    <li><?php echo $this->Html->image('images/photos/1.png',array("ng-click"=>"addPhoto('1.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/2.png',array("ng-click"=>"addPhoto('2.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/3.png',array("ng-click"=>"addPhoto('3.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/4.png',array("ng-click"=>"addPhoto('4.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/5.png',array("ng-click"=>"addPhoto('5.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/6.png',array("ng-click"=>"addPhoto('6.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/7.png',array("ng-click"=>"addPhoto('7.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/8.png',array("ng-click"=>"addPhoto('8.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/9.png',array("ng-click"=>"addPhoto('9.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/10.png',array("ng-click"=>"addPhoto('10.png')")); ?></li>
                                    <li><?php echo $this->Html->image('images/photos/11.png',array("ng-click"=>"addPhoto('11.png')")); ?></li>
                                </ul>
                            </div>

                            <div style="clear:both"></div>
                        </div>
                    </div>

                    <div class="tab-item" id="upload">
                        <h3>UPLOAD IMAGE</h3>
                        <div id="clickable" class="dz-clickable">
                            <p>Drag image here or into canvas to upload</p>
                            <?php echo $this->Html->image('images/select-image.png'); ?>
                        </div>
                        <div id="previews" class="dropzone-previews"></div>
                    </div>

                    <div class="tab-item" id="background">
                        <h3>BACKGROUND COLOR</h3>

                        <div id='picker' class='bgcolor'>
                            <div class="colour-wrapper">
                                <div id="mood0-000000" class="colorbox-pickbox" onclick="addBgColors('rgb(0, 0, 0)')" style="padding-left:1px;  background-color: rgb(0, 0, 0);"></div>
                                <div id="mood1-222222" class="colorbox-pickbox" onclick="addBgColors('rgb(34, 34, 34)')" style="  background-color: rgb(34, 34, 34);"></div>
                                <div id="mood2-353535" class="colorbox-pickbox" onclick="addBgColors('rgb(53, 53, 53)')" style="  background-color: rgb(53, 53, 53);"></div>
                                <div id="mood3-424242" class="colorbox-pickbox"  onclick="addBgColors('rgb(66, 66, 66)')" style="  background-color: rgb(66, 66, 66);"></div>
                                <div id="mood4-525252" class="colorbox-pickbox" onclick="addBgColors('rgb(82, 82, 82)')" style=" padding-left:1px; background-color: rgb(82, 82, 82);"></div>
                                <div id="mood5-686868" class="colorbox-pickbox" onclick="addBgColors('rgb(104, 104, 104)')" style="  background-color: rgb(104, 104, 104);"></div>
                                <div id="mood6-7e7e7e" class="colorbox-pickbox" onclick="addBgColors('rgb(126, 126, 126)')"  style="padding-left:1px;  background-color: rgb(126, 126, 126);"></div>
                                <div id="mood7-989898" class="colorbox-pickbox" onclick="addBgColors('rgb(152, 152, 152)')" style="  background-color: rgb(152, 152, 152);"></div>
                                <div id="mood8-adadad" class="colorbox-pickbox" onclick="addBgColors('rgb(173, 173, 173)')" style="  background-color: rgb(173, 173, 173);"></div>
                                <div id="mood9-bfbfbf" class="colorbox-pickbox" onclick="addBgColors('rgb(191, 191, 191)')" style=" padding-left:1px; background-color: rgb(191, 191, 191);"></div>
                                <div id="mood10-d4d4d4" class="colorbox-pickbox" onclick="addBgColors('rgb(212, 212, 212)')" style="  background-color: rgb(212, 212, 212);"></div>
                                <div id="mood11-dddddd" class="colorbox-pickbox" onclick="addBgColors('rgb(221, 221, 221)')" style="  background-color: rgb(221, 221, 221);"></div>
                                <div id="mood12-ececec" class="colorbox-pickbox" onclick="addBgColors('rgb(236, 236, 236)')" style="  background-color: rgb(236, 236, 236);"></div>
                                <div id="mood13-ffffff" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 255, 255)')" style=" background-color: rgb(255, 255, 255);"></div>
                                <div class="colorbox-spacebox" style="clear:both; width: 200px; height: 8px; background-color: #fff;"></div>
                                <div id="mood14-a52a2a" class="colorbox-pickbox" onclick="addBgColors('rgb(165, 42, 42)')" style="padding-left:1px; background-color: rgb(165, 42, 42);"></div>
                                <div id="mood15-f4a460" class="colorbox-pickbox" onclick="addBgColors('rgb(244, 164, 96)')" style="  background-color: rgb(244, 164, 96);"></div>
                                <div id="mood16-f5deb3" class="colorbox-pickbox" onclick="addBgColors('rgb(245, 222, 179)')" style="  background-color: rgb(245, 222, 179);"></div>
                                <div id="mood17-ffff00" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 255, 0)')" style="  background-color: rgb(255, 255, 0);"></div>
                                <div id="mood18-ffa500" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 165, 0)')" style=" padding-left:1px;  background-color: rgb(255, 165, 0);"></div>
                                <div id="mood19-ff0000" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 0, 0)')" style="  background-color: rgb(255, 0, 0);"></div>
                                <div id="mood20-ff00ff" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 0, 255)')" style=" padding-left:1px; background-color: rgb(255, 0, 255);"></div>
                                <div id="mood21-800080" class="colorbox-pickbox" onclick="addBgColors('rgb(128, 0, 128)')" style="  background-color: rgb(128, 0, 128);"></div>
                                <div id="mood22-9370db" class="colorbox-pickbox" onclick="addBgColors('rgb(147, 112, 219)')" style="  background-color: rgb(147, 112, 219);"></div>
                                <div id="mood23-6a5acd" class="colorbox-pickbox" onclick="addBgColors('rgb(106, 90, 205)')" style=" padding-left:1px; background-color: rgb(106, 90, 205);"></div>
                                <div id="mood24-0000ff" class="colorbox-pickbox" onclick="addBgColors('rgb(0, 0, 255)')" style="  background-color: rgb(0, 0, 255);"></div>
                                <div id="mood25-57dcfc" class="colorbox-pickbox" onclick="addBgColors('rgb(87, 220, 252)')" style="  background-color: rgb(87, 220, 252);"></div>
                                <div id="mood26-00ffff" class="colorbox-pickbox" onclick="addBgColors('rgb(0, 255, 255)')" style="  background-color: rgb(0, 255, 255);"></div>
                                <div id="mood27-00ff00" class="colorbox-pickbox" onclick="addBgColors('rgb(0, 255, 0)')" style="  background-color: rgb(0, 255, 0);"></div>
                                <div class="colorbox-spacebox" style="clear:both; width: 200px; height: 8px; background-color: #fff;"></div>
                                <div id="mood28-e67657" class="colorbox-pickbox" onclick="addBgColors('rgb(230, 118, 87)')" style="padding-left:1px;  background-color: rgb(230, 118, 87);"></div>
                                <div id="mood29-f5bb94" class="colorbox-pickbox" onclick="addBgColors('rgb(245, 187, 148)')" style="  background-color: rgb(245, 187, 148);"></div>
                                <div id="mood30-f5daaf" class="colorbox-pickbox"onclick="addBgColors('rgb(245, 218, 175)')"  style="  background-color: rgb(245, 218, 175);"></div>
                                <div id="mood31-ffe29b" class="colorbox-pickbox"onclick="addBgColors('rgb(255, 226, 155)')"  style="  background-color: rgb(255, 226, 155);"></div>
                                <div id="mood32-fca785" class="colorbox-pickbox" onclick="addBgColors('rgb(252, 167, 133)')" style="  padding-left:1px; background-color: rgb(252, 167, 133);"></div>
                                <div id="mood33-f8bcbc" class="colorbox-pickbox" onclick="addBgColors('rgb(248, 188, 188)')"style="  background-color: rgb(248, 188, 188);"></div>
                                <div id="mood34-ffbecc" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 190, 204)')"style="  padding-left:1px;background-color: rgb(255, 190, 204);"></div>
                                <div id="mood35-e8c3d5" class="colorbox-pickbox" onclick="addBgColors('rgb(232, 195, 213)')"style="  background-color: rgb(232, 195, 213);"></div>
                                <div id="mood36-dacff6" class="colorbox-pickbox" onclick="addBgColors('rgb(218, 207, 246)')"style="  background-color: rgb(218, 207, 246);"></div>
                                <div id="mood37-afb3fa" class="colorbox-pickbox" onclick="addBgColors('rgb(175, 179, 250)')"style=" padding-left:1px; background-color: rgb(175, 179, 250);"></div>
                                <div id="mood38-93c7f6" class="colorbox-pickbox" onclick="addBgColors('rgb(147, 199, 246)')"style="  background-color: rgb(147, 199, 246);"></div>
                                <div id="mood39-89d1e2" class="colorbox-pickbox" onclick="addBgColors('rgb(137, 209, 226)')"style="  background-color: rgb(137, 209, 226);"></div>
                                <div id="mood40-b1f8f8" class="colorbox-pickbox" onclick="addBgColors('rgb(177, 248, 248)')"style="  background-color: rgb(177, 248, 248);"></div>
                                <div id="mood41-d9ead3" class="colorbox-pickbox" onclick="addBgColors('rgb(217, 234, 211)')"style="  background-color: rgb(217, 234, 211);"></div>

                                <div id="mood42-d05e3f" class="colorbox-pickbox" onclick="addBgColors('rgb(208, 94, 63)')"style="  padding-left:1px; background-color: rgb(208, 94, 63);"></div>
                                <div id="mood43-eba97b" class="colorbox-pickbox" onclick="addBgColors('rgb(235, 169, 123)')"style="  background-color: rgb(235, 169, 123);"></div>
                                <div id="mood44-efce9a" class="colorbox-pickbox" onclick="addBgColors('rgb(239, 206, 154)')"style="  background-color: rgb(239, 206, 154);"></div>
                                <div id="mood45-ffd87a" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 216, 122)')"style="  background-color: rgb(255, 216, 122);"></div>
                                <div id="mood46-ff8251" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 130, 81)')"style="   padding-left:1px;background-color: rgb(255, 130, 81);"></div>
                                <div id="mood47-f5aeae" class="colorbox-pickbox"onclick="addBgColors('rgb(45, 174, 174)')" style="  background-color: rgb(245, 174, 174);"></div>
                                <div id="mood48-fd9eb3" class="colorbox-pickbox" onclick="addBgColors('rgb(253, 158, 179)')"style="  padding-left:1px; background-color: rgb(253, 158, 179);"></div>
                                <div id="mood49-d5a6bd" class="colorbox-pickbox" onclick="addBgColors('rgb(213, 166, 189)')"style="  background-color: rgb(213, 166, 189);"></div>
                                <div id="mood50-baa6eb" class="colorbox-pickbox" onclick="addBgColors('rgb(186, 166, 235)')"style="  background-color: rgb(186, 166, 235);"></div>
                                <div id="mood51-898df4" class="colorbox-pickbox" onclick="addBgColors('rgb(137, 141, 244)')"style="  padding-left:1px; background-color: rgb(137, 141, 244);"></div>
                                <div id="mood52-5da8eb" class="colorbox-pickbox"onclick="addBgColors('rgb(93, 168, 235)')" style="  background-color: rgb(93, 168, 235);"></div>
                                <div id="mood53-4ea3b7" class="colorbox-pickbox"onclick="addBgColors('rgb(78, 163, 183)')" style="  background-color: rgb(78, 163, 183);"></div>
                                <div id="mood54-70ecec" class="colorbox-pickbox"onclick="addBgColors('rgb(112, 236, 236)')" style="  background-color: rgb(112, 236, 236);"></div>
                                <div id="mood55-b6d7a8" class="colorbox-pickbox" onclick="addBgColors('rgb(182, 215, 168)')"style="  background-color: rgb(182, 215, 168);"></div>

                                <div id="mood56-a94124" class="colorbox-pickbox" onclick="addBgColors('rgb(169, 65, 36)')"style="  padding-left:1px; background-color: rgb(169, 65, 36);"></div>
                                <div id="mood57-e19967" class="colorbox-pickbox" onclick="addBgColors('rgb(225, 153, 103)')"style="  background-color: rgb(225, 153, 103);"></div>
                                <div id="mood58-eec583" class="colorbox-pickbox" onclick="addBgColors('rgb(238, 197, 131)')"style="  background-color: rgb(238, 197, 131);"></div>
                                <div id="mood59-ffcd55" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 205, 85)')"style="  background-color: rgb(255, 205, 85);"></div>
                                <div id="mood60-fa6a31" class="colorbox-pickbox" onclick="addBgColors('rgb(250, 106, 49)')"style=" padding-left:1px; background-color: rgb(250, 106, 49);"></div>
                                <div id="mood61-ea9999" class="colorbox-pickbox" onclick="addBgColors('rgb(234, 153, 153)')"style="  background-color: rgb(234, 153, 153);"></div>
                                <div id="mood62-fd7794" class="colorbox-pickbox" onclick="addBgColors('rgb(253, 119, 148)')"style=" padding-left:1px; background-color: rgb(253, 119, 148);"></div>
                                <div id="mood63-c27ba0" class="colorbox-pickbox" onclick="addBgColors('rgb(194, 123, 160)')"style="  background-color: rgb(194, 123, 160);"></div>
                                <div id="mood64-8d74cb" class="colorbox-pickbox" onclick="addBgColors('rgb(141, 116, 203)')"style="  background-color: rgb(141, 116, 203);"></div>
                                <div id="mood65-7075ef" class="colorbox-pickbox" onclick="addBgColors('rgb(112, 117, 239)')"style=" padding-left:1px; background-color: rgb(112, 117, 239);"></div>
                                <div id="mood66-2e7fc8" class="colorbox-pickbox" onclick="addBgColors('rgb(46, 127, 200)')"style="  background-color: rgb(46, 127, 200);"></div>
                                <div id="mood67-227487" class="colorbox-pickbox" onclick="addBgColors('rgb(34, 116, 135)')"style="  background-color: rgb(34, 116, 135);"></div>
                                <div id="mood68-56d3d3" class="colorbox-pickbox" onclick="addBgColors('rgb(86, 211, 211)')"style="  background-color: rgb(86, 211, 211);"></div>
                                <div id="mood69-93c47d" class="colorbox-pickbox"onclick="addBgColors('rgb(147, 196, 125)')" style="  background-color: rgb(147, 196, 125);"></div>
                                <div id="mood70-83221e" class="colorbox-pickbox"onclick="addBgColors('rgb(131, 34, 30)')"style="  padding-left:1px;background-color: rgb(131, 34, 30);"></div>
                                <div id="mood71-c98658" class="colorbox-pickbox" onclick="addBgColors('rgb(201, 134, 88)')"style="  background-color: rgb(201, 134, 88);"></div>
                                <div id="mood72-ebb867" class="colorbox-pickbox" onclick="addBgColors('rgb(235, 184, 103)')"style="  background-color: rgb(235, 184, 103);"></div>
                                <div id="mood73-ffc332" class="colorbox-pickbox" onclick="addBgColors('rgb(255, 195, 50)')"style="  background-color: rgb(255, 195, 50);"></div>
                                <div id="mood74-f8591a" class="colorbox-pickbox" onclick="addBgColors('rgb(248, 89, 26)')"style="  padding-left:1px;background-color: rgb(248, 89, 26);"></div>
                                <div id="mood75-e06666" class="colorbox-pickbox" onclick="addBgColors('rgb(224, 102, 102)')"style="  background-color: rgb(224, 102, 102);"></div>
                                <div id="mood76-ea5a79" class="colorbox-pickbox" onclick="addBgColors('rgb(234, 90, 121)')"style="  padding-left:1px;background-color: rgb(234, 90, 121);"></div>
                                <div id="mood77-a52566" class="colorbox-pickbox"onclick="addBgColors('rgb(165, 37, 102)')" style="  background-color: rgb(165, 37, 102);"></div>
                                <div id="mood78-674ea7" class="colorbox-pickbox" onclick="addBgColors('rgb(103, 78, 167)')"style="  background-color: rgb(103, 78, 167);"></div>
                                <div id="mood79-595fe4" class="colorbox-pickbox" onclick="addBgColors('rgb(89, 95, 228)')"style="  padding-left:1px;background-color: rgb(89, 95, 228);"></div>
                                <div id="mood80-1c5d99" class="colorbox-pickbox" onclick="addBgColors('rgb(28, 93, 153)')"style="  background-color: rgb(28, 93, 153);"></div>
                                <div id="mood81-1a6171" class="colorbox-pickbox" onclick="addBgColors('rgb(26, 97, 113)')"style="  background-color: rgb(26, 97, 113);"></div>
                                <div id="mood82-3bb9b9" class="colorbox-pickbox"onclick="addBgColors('rgb(59, 185, 185)')" style="  background-color: rgb(59, 185, 185);"></div>
                                <div id="mood83-6aa84f" class="colorbox-pickbox"onclick="addBgColors('rgb(106, 168, 79)')" style="  background-color: rgb(106, 168, 79);"></div>
                                <div id="mood84-671a17" class="colorbox-pickbox"onclick="addBgColors('rgb(103, 26, 23)')" style=" padding-left:1px; background-color: rgb(103, 26, 23);"></div>
                                <div id="mood85-b47448" class="colorbox-pickbox" onclick="addBgColors('rgb(180, 116, 72)')"style="  background-color: rgb(180, 116, 72);"></div>
                                <div id="mood86-e6ab4d" class="colorbox-pickbox" onclick="addBgColors('rgb(230, 171, 77)')"style="  background-color: rgb(230, 171, 77);"></div>
                                <div id="mood87-fcb711" class="colorbox-pickbox" onclick="addBgColors('rgb(252, 183, 17)')"style="  background-color: rgb(252, 183, 17);"></div>
                                <div id="mood88-f84600" class="colorbox-pickbox" onclick="addBgColors('rgb(248, 70, 0)')"style="  padding-left:1px;background-color: rgb(248, 70, 0);"></div>
                                <div id="mood89-cc0000" class="colorbox-pickbox" onclick="addBgColors('rgb(204, 0, 0)')"style="  background-color: rgb(204, 0, 0);"></div>
                                <div id="mood90-d04563" class="colorbox-pickbox" onclick="addBgColors('rgb(208, 69, 99)')"style="  padding-left:1px;background-color: rgb(208, 69, 99);"></div>
                                <div id="mood91-80174c" class="colorbox-pickbox" onclick="addBgColors('rgb(128, 23, 76)')"style="  background-color: rgb(128, 23, 76);"></div>
                                <div id="mood92-351c75" class="colorbox-pickbox" onclick="addBgColors('rgb(53, 28, 117)')"style="  background-color: rgb(53, 28, 117);"></div>
                                <div id="mood93-3c43ca" class="colorbox-pickbox" onclick="addBgColors('rgb(60, 67, 202)')"style="  padding-left:1px;background-color: rgb(60, 67, 202);"></div>
                                <div id="mood94-134e84" class="colorbox-pickbox" onclick="addBgColors('rgb(19, 78, 132)')"style="  background-color: rgb(19, 78, 132);"></div>
                                <div id="mood95-104a57" class="colorbox-pickbox" onclick="addBgColors('rgb(16, 74, 87)')"style="  background-color: rgb(16, 74, 87);"></div>
                                <div id="mood96-2fa4a4" class="colorbox-pickbox" onclick="addBgColors('rgb(47, 164, 164)')"style="  background-color: rgb(47, 164, 164);"></div>
                                <div id="mood97-38761d" class="colorbox-pickbox" onclick="addBgColors('rgb(56, 118, 29)')"style="  background-color: rgb(56, 118, 29);"></div>
                                <div id="mood98-4f120f" class="colorbox-pickbox" onclick="addBgColors('rgb(79, 18, 15)')"style=" padding-left:1px; background-color: rgb(79, 18, 15);"></div>
                                <div id="mood99-a1613b" class="colorbox-pickbox" onclick="addBgColors('rgb(161, 97, 59)')"style="  background-color: rgb(161, 97, 59);"></div>
                                <div id="mood100-e19e33" class="colorbox-pickbox" onclick="addBgColors('rgb(225, 158, 51)')"style="  background-color: rgb(225, 158, 51);"></div>
                                <div id="mood101-f99e1c" class="colorbox-pickbox" onclick="addBgColors('rgb(249, 158, 28)')"style="  background-color: rgb(249, 158, 28);"></div>
                                <div id="mood102-e34304" class="colorbox-pickbox" onclick="addBgColors('rgb(227, 67, 4)')"style="  padding-left:1px;background-color: rgb(227, 67, 4);"></div>
                                <div id="mood103-990000" class="colorbox-pickbox" onclick="addBgColors('rgb(153, 0, 0)')"style="  background-color: rgb(153, 0, 0);"></div>
                                <div id="mood104-af3852" class="colorbox-pickbox" onclick="addBgColors('rgb(175, 56, 82)')"style="  padding-left:1px;background-color: rgb(175, 56, 82);"></div>
                                <div id="mood105-6a0e3c" class="colorbox-pickbox" onclick="addBgColors('rgb(106, 14, 60)')"style="  background-color: rgb(106, 14, 60);"></div>
                                <div id="mood106-20124d" class="colorbox-pickbox" onclick="addBgColors('rgb(32, 18, 77)')"style="  background-color: rgb(32, 18, 77);"></div>
                                <div id="mood107-181e9d" class="colorbox-pickbox" onclick="addBgColors('rgb(24, 30, 157)')"style="  padding-left:1px;background-color: rgb(24, 30, 157);"></div>
                                <div id="mood108-073763" class="colorbox-pickbox" onclick="addBgColors('rgb(7, 55, 99)')"style=" background-color: rgb(7, 55, 99);"></div>
                                <div id="mood109-0c3943" class="colorbox-pickbox" onclick="addBgColors('rgb(12, 57, 67)')"style="  background-color: rgb(12, 57, 67);"></div>
                                <div id="mood110-218787" class="colorbox-pickbox" onclick="addBgColors('rgb(33, 135, 135)')"style="  background-color: rgb(33, 135, 135);"></div>
                                <div id="mood111-274e13" class="colorbox-pickbox" onclick="addBgColors('rgb(39, 78, 19)')"style="background-color: rgb(39, 78, 19);"></div>
                            </div>
                            <div class="hexa">
                                <?php echo $this->Html->image('images/colorpicker.png')?>
                                <p>Hex value: <span id="hexxa" style="font-size: 14px; color: #00c7f7; font-weight: bold;">#FFFFFF</span></p>
                            </div>
                        </div>

                        <h3>BACKGROUND IMAGE</h3>
                        <div id="opacity-image">
                            <h4>Opacity:</h4>
                            <div id="sliderbackground"></div>
                            <div id="sliderbottom">
                                <p style="float:left; margin-left:10px; font-size:13px;">0%</p>
                                <p style="float:right; margin-right:10px; font-size:13px;">100%<p>
                            </div>
                        </div>
                        <ul>
                            <li><?php echo $this->Html->image('images/background/1.gif',array("ng-click"=>"addBackground('2.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/2.gif',array("ng-click"=>"addBackground('2.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/3.gif',array("ng-click"=>"addBackground('3.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/4.gif',array("ng-click"=>"addBackground('4.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/5.gif',array("ng-click"=>"addBackground('5.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/6.gif',array("ng-click"=>"addBackground('6.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/7.gif',array("ng-click"=>"addBackground('7.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/8.gif',array("ng-click"=>"addBackground('8.jpg')")); ?></li>
                            <li><?php echo $this->Html->image('images/background/9.gif',array("ng-click"=>"addBackground('9.jpg')")); ?></li>
                        </ul>
                    </div>

                    <div class="tab-item" id="text">
                        <div class="title" ng-click="addTitle()">Tillte</div>
                        <div class="subtitle" ng-click="addSubtitle()">Subtitle </div>
                        <div class="subtitle2" ng-click="addSubtitle2()">Subtitle 2 </div>
                        <div class="body-text" ng-click="addBody()">Body Text </div>
                    </div>

                    <div class="tab-item" id="styles">
                        <h3>COLOR PALETTE</h3>
                        <ul>
                            <li><a href="#" class="style1"></a></li>
                            <li><a href="#" class="style2"></a></li>
                            <li><a href="#" class="style3"></a></li>
                            <li><a href="#" class="style4"></a></li>
                            <li><a href="#" class="style5"></a></li>
                            <li><a href="#" class="style6"></a></li>
                        </ul>
                    </div>

                    <div class="tab-item" id="tools">
                        <h3>COLOR PALETTE</h3>
                        <ul>
                            <li><a href="#map" rel="modal:open" class="map"></a></li>
                            <li><a href="#" class="line"></a></li>
                            <li><a href="#chart" rel="modal:open" class="chart"></a></li>
                        </ul>

                        <div class="insert-youtube">
                            <?php echo $this->Html->image('images/ruler.png'); ?>
                            <h5>Video Url:</h5>
                            <span>Youtube and video are suppoted.</span>
                            <form>
                                <input type="text" id="link"  value="http://vimeo.com/97814236" placeholder="http://"/>
                                <h5>Sample:</h5>
                                <span>http://youtu.be/7RGkgzPX0_w</span>
                                <span>http://vimeo.com/97814236</span>
                                <input type="submit" value="insert" id="insert-video"/>
                            </form>
                        </div>
                    </div>
                </div>

                <div id="main-worker">
                    <div id="wrap-custom">
                        <ul class="main-custom">
                            <li class="setting">
                                <a href="" class="setting-icon"  ></a>
                                <ul class="submenu">
                                    <li class="titlesetting">Canvas Width</li>
                                    <li><input type="text" size="13"  id="canwidth" placeholder="850px" onchange= "changeWidthCanvas()" ></li>
                                    <li class="titlecheckbox" ><input type="checkbox" checked="checked"> Resize Content</li>
                                    <li class="titlecheckbox" >Block Height</li>
                                    <li><input type="text" size="13" id="canheight" placeholder="600px" onchange="changeHeightCanvas();"></li>
                                </ul>
                            </li>
                            <li><a href="" class="down-icon"></a></li>
                            <li><a href="" class="up-icon"></a></li>
                            <li><a href="" class="clone-icon"></a></li>
                            <li><a href="" class="delete-icon"></a></li>
                            <li><a href="" class="add-icon"></a></li>
                            <li><a href="" class="group-icon"></a></li>
                            <li><a href="" class="clock-icon" onclick ="setLockX(!getLockX(), !getLockY());"></a></li>
                            <li><a href="" class="color-icon" id="colorSelector"></a></li>
                            <li class="opacity">
                                <a href="" id="opac" class="opacity-icon"></a>
                                <div id="wrap-slider">
                                    <h4>Opacity:</h4>
                                    <div id="slider"></div>
                                    <div id="sliderbottom">
                                        <p style="float:left; margin-left:10px; color:#fff; font-size:13px;">0%</p>
                                        <p style="float:right; margin-right:10px; color:#fff; font-size:13px;">100%<p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="styled-select slate">
                                    <select id="font-family">
                                        <option value="arial">Arial</option>
                                        <option value="helvetica" selected="">Helvetica</option>
                                        <option value="myriad pro">Myriad Pro</option>
                                        <option value="delicious">Delicious</option>
                                        <option value="verdana">Verdana</option>
                                        <option value="georgia">Georgia</option>
                                        <option value="courier">Courier</option>
                                        <option value="comic sans ms">Comic Sans MS</option>
                                        <option value="impact">Impact</option>
                                        <option value="monaco">Monaco</option>
                                        <option value="optima">Optima</option>
                                        <option value="hoefler text">Hoefler Text</option>
                                        <option value="plaster">Plaster</option>
                                        <option value="engagement">Engagement</option>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="styled-select-size slate-size">
                                    <select id="font-size">
                                        <option value="8" selected="">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="14">14</option>
                                        <option value="16">16</option>
                                        <option value="18">18</option>
                                    </select>
                                </div>
                            </li>
                            <li><a href="" class="bold-icon" ng-click="toggleBold()"></a></li>
                            <li><a href="" class="italy-icon" ng-click="toggleItalic()"></a></li>
                            <li class="align">
                                <a href="" class="align-icon"></a>
                                <ul class="submenu">
                                    <li><a href="" class="align-left" ng-click="alignText('Left')"></a></li>
                                    <li><a href="" class="align-center" ng-click="alignText('Center')"></a></li>
                                    <li><a href="" class="align-right" ng-click="alignText('Right')"></a></li>
                                    <li><a href="" class="align-justify" ng-click="alignText('Justify')"></a></li>
                                </ul>
                            </li>
                            <li><a href="" class="link-icon"></a></li>
                            <li class="arrange">
                                <a href="" class="arrange-icon"></a>
                                <ul class="submenu">
                                    <li><a href="" class="bring-to-front" ng-click="bringToFront()"></a></li>
                                    <li><a href="" class="send-to-back" ng-click="sendToBack()"></a></li>
                                    <li><a href="" class="bring-forward" ng-click="bringForward()"></a></li>
                                    <li><a href="" class="send-backward" ng-click="sendBackwards()"></a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="laugh-icon"></a></li>
                        </ul>
                    </div>

                    <div id="wrap-canvas">
                        <div class="container_canvas">
                            <canvas id="canvas" class="acanvas" width="800" height="400"></canvas>
                        </div>
                        <div class="canvas-to-img">
                        </div>
                        <ul>
                            <li><a href="" class="undo-icon" onclick="undo()" ><span>Undo</span> </a></li>
                            <li><a href="" class="redo-icon" onclick="redo()"><span>Redo</span></a></li>
                            <li><a href="" class="copy-icon" onclick="copy()"><span>Copy</span></a></li>
                            <li><a href=""  class="cut-icon" onclick="cut()"><span>Cut</span></a></li>
                            <li><a href="" class="past-icon" onclick="paste()"><span>Paste</span></a></li>
                            <li><a href="" class="recycle-icon" onclick="removeSelected()"><span>Delete</span></a></li>
                            <li><a href="" class="align-left-icon" onclick="align_left()"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>



        <!-- END MAIN-CONTENT -->
        <div id="chart" style="display:none; height:520px;">
            <div class="modal-header">
                <a href="#close-modal" rel="modal:close" class="close-modal">Cancel</a>
                <a href="#close-modal" rel="modal:close" id="insertchart" class="close-modal">Insert Chart</a>
                <h2 class="title"></h2>
            </div>
            <div class="modal-content">
                <div class="modal-content-left">
                    <div id="menu-chart">
                        <ul>
                            <li id="icon-chartVbar" class="chart-column" data-original-title="Column" data-toggle="tooltip"></li>
                            <li id="icon-chartHbar" class="chart-bar" data-original-title="Bar" data-toggle="tooltip"></li>
                            <li id="icon-chartLine" class="chart-line" data-original-title="Line" data-toggle="tooltip"></li>
                            <li id="icon-chartArea" class="chart-area" data-original-title="Area" data-toggle="tooltip"></li>
                            <li id="icon-chartPie" class="chart-pie" data-original-title="Pie" data-toggle="tooltip"></li>
                            <li id="icon-chartGradient" class="chart-pyramid" data-original-title="Pyramid" data-toggle="tooltip"></li>
                            <li id="icon-chartDonut" class="chart-donut" data-original-title="Donut" data-toggle="tooltip"></li>
                        </ul>     
                    </div>
                    <div id="chart-sheet" style="width:460px;"></div>
                </div>
                <div class="modal-content-right">
                    <div class="wrap-sheet">
                        <div id="sheet" class="handsontable"></div>
                    </div>
                </div>

            </div>
        </div>


        <!-- START: MAP -->
        <div id="map" style="display: none;height:500px;">
            <div class="modal-header">
                <a href="#close-modal" rel="modal:close" class="close-modal">CANCEL</a>
                <a href="#close-modal" rel="modal:close" class="close-modal" id="insert-map">INSERT MAP</a>
                <h2 class="title"></h2>
            </div>
            <div class="modal-content">
                <div class="modal-content-left">
                    <div id="menu-map">
                        <ul>
                            <li class="world" name-map="custom/world" id="world" data-original-title="World" data-toggle="tooltip"></li>
                            <li class="europe" name-map="custom/europe" id="europe" data-original-title="Europe" data-toggle="tooltip"></li>
                            <li class="asia" name-map="custom/asia" id="asia" data-original-title="Asia" data-toggle="tooltip"></li>
                            <!-- <li class="south-east"></li> -->
                            <li class="africa" name-map="custom/africa" id="africa" data-original-title="Africa" data-toggle="tooltip"></li>
                            <li class="south-america" name-map="custom/south-america" id="south-america" data-original-title="South America" data-toggle="tooltip"></li>
                            <li class="north-america" name-map="custom/north-america" id="north-america" data-original-title="North America" data-toggle="tooltip"></li>
                            <li class="oceania" name-map="custom/oceania" id="oceania" data-original-title="Oceania" data-toggle="tooltip"></li>
                            <li class="usa" name-map="countries/us/us-all" id="usa" data-original-title="USA" data-toggle="tooltip"></li>
                            <li class="australia" name-map="countries/au/au-all" id="australia" data-original-title="Australia" data-toggle="tooltip"></li>


                        </ul>     
                    </div>
                    <div id="map-content" style="height: 400px;float:left; min-width: 420px; max-width: 420px;height:400px; margin: 0 auto"></div>
                </div>
                <div class="modal-content-right">
                    <div class="wrap-sheet">
                        <div id="sheet-map" style="height: 400px; overflow:auto;" class="handsontable"></div>
                    </div>
                </div>
            </div>  
        </div>
        <!-- END: MAP -->



        <!-- BEGIN FOOTER -->
        <footer>
        </footer>
        <?php echo $this->Html->script(array('lib/jquery',
        'jquery-ui',
        'http://code.highcharts.com/highcharts.js',
        'http://code.highcharts.com/highcharts-3d.js',
        'http://code.highcharts.com/modules/funnel.js',
        'lib/fabric',
        'http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js',
        'scripts', 
        'lib/angular.min',
        'controler',
        'dropzone',
        'colorpicker',
        'jquery.handsontable.full',     
        'http://code.highcharts.com/maps/highmaps.js',
            'http://code.highcharts.com/maps/modules/map.js',
            'http://code.highcharts.com/modules/exporting.js',
            'http://code.highcharts.com/maps/modules/data.js',
            'http://code.highcharts.com/mapdata/custom/world.js',
            'http://code.highcharts.com/mapdata/custom/europe.js',
            'http://code.highcharts.com/mapdata/custom/asia.js',
            'http://code.highcharts.com/mapdata/custom/africa.js',
            'http://code.highcharts.com/mapdata/custom/south-america.js',
            'http://code.highcharts.com/mapdata/custom/north-america.js',
            'http://code.highcharts.com/mapdata/custom/oceania.js',
            'http://code.highcharts.com/mapdata/countries/us/us-all.js',
            'http://code.highcharts.com/mapdata/countries/au/au-all.js')) ;?>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <!-- END SCRIPT -->
    </body>
</html>